<script>
import { mapGetters } from 'vuex'
import { employmentType } from '@/constant'
import { validMobile } from '@/utils/validate'

export default {
  name: 'addEmpDialog',
  data() {
    const validaMobile = (rule, value, callback) => {
      if (!validMobile(value)) return callback(new Error('手机号码格式错误'))
      callback()
    }
    return {
      /* 加载部门的loading状态 */
      loading: false,
      /* 聘用形式枚举数组 */
      employmentType,
      /* 表单数据对象 */
      formData: {
        username: '',
        mobile: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        timeOfEntry: '',
        correctionTime: ''
      },
      /* 表单规则对象 */
      formRules: {
        username: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入员工手机号', trigger: 'blur' },
          { validator: validaMobile, trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用的形式', trigger: 'change' }
        ],
        workNumber: [
          { required: true, message: '请输入员工工号', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请选择所属部门名称', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' }
        ]
      },
      /* 是否显示tree组件 */
      showTree: false
    }
  },
  props: {
    showEmpDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /* 派发action发送请求获取企业部门列表的回调函数 */
    async fetchDepartmentsListtsList() {
      try {
        this.loading = true
        const message = await this.$store.dispatch('departmentsStore/fetchDepartmentsList')
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /* 员工部门输入框获取焦点的回调函数 */
    getDeptList() {
      // 显示tree组件
      this.showTree = true
      if (this.treeDepartmentsList.length) return
      // 获取部门列表
      this.fetchDepartmentsListtsList()
    },
    /* 点击tree组件节点的回调函数 */
    handleNodeClick(node) {
      if (node.children) return this.$message.warning('一级部门不能选择')
      this.formData.departmentName = node.name
      this.showTree = false
    },
    /* 对话框关闭时的回调函数 */
    handleClose() {
      this.$refs.elForm.resetFields()
      this.$emit('update:showEmpDialog', false)
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.$emit('update:showEmpDialog', false)
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valid = await this.$refs.elForm.validate().catch(error => error)
      if (!valid) return
      try {
        const message = await this.$store.dispatch('employeesStore/addEmployess', this.formData)
        this.$message.success(message)
        this.$emit('submit')
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    ...mapGetters('departmentsStore', ['treeDepartmentsList'])
  },
  emits: ['submit']
}
</script>

<template>
  <el-dialog title="添加员工" :visible="showEmpDialog" @close="handleClose" :close-on-click-modal="false">
    <el-form label-width="100px" :model="formData" :rules="formRules" ref="elForm">
      <el-form-item label="员工姓名" prop="username">
        <el-input placeholder="请输入员工姓名" v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="员工手机" prop="mobile">
        <el-input placeholder="请输入员工手机号" v-model="formData.mobile"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker type="date" placeholder="请选择员工入职时间" v-model="formData.timeOfEntry"></el-date-picker>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker type="date" placeholder="请选择员工转正时间" v-model="formData.correctionTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select placeholder="请选择聘用形式" v-model="formData.formOfEmployment">
          <el-option v-for="(item,index) in employmentType" :value="item.id" :label="item.value" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工工号" prop="workNumber">
        <el-input placeholder="请输入员工工号" v-model="formData.workNumber"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" prop="departmentName">
        <el-input placeholder="请输入员工所属部门" v-model="formData.departmentName" @focus="getDeptList"></el-input>
        <el-tree v-if="showTree" :data="treeDepartmentsList" :props="{label:'name'}" :expand-on-click-node="false" @node-click="handleNodeClick" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                 element-loading-background="rgb(255, 255, 255"
        ></el-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  width: 70%;

  .el-date-editor {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }
}

::v-deep .el-dialog__body {
  display: flex;
  justify-content: center;
}
</style>
